<template>
  <div class="personal_">
    <div class="p_top">
      <img :src="this.$store.state.user.headPic" alt="#" @click="go_1" />
      <p>
        <span>{{ this.$store.state.user.name }}</span>
        <span>{{ this.$store.state.user.phoneNum }}</span>
      </p>
      <span>
        <i class="fa fa-angle-right"></i>
      </span>
    </div>
    <ul class="p_list">
      <li @click="go_2">
        <img src="../../assets/images/钱包.png" alt />
        <span >我的钱包</span>
      </li>
      <li @click="go_10">
        <img src="../../assets/images/钱包.png" alt />
        <span>领券中心</span>
      </li>
      <li @click="go_3">
        <img src="../../assets/images/订单.png" alt />
        <span>我的订单</span>
      </li>
      <li @click="go_9">
        <img src="../../assets/images/订单.png" alt />
        <span>我的充值订单</span>
      </li>
      <li @click="go_4">
        <img src="../../assets/images/帮助中心.png" alt />
        <span>帮助中心</span>
      </li>
      <li @click="go_5">
        <img src="../../assets/images/设置.png" alt />
        <span>设置</span>
      </li>
      <li @click="go_8">
        <img src="../../assets/images/帮助中心.png" alt />
        <span>完善资料</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { user } from "../../request/userinfo/userinfo";
export default {
  props: {},
  data() {
    return {};
  },
  mounted() {
    user({username:window.localStorage.getItem('ms_username')}).then((res) => {
      this.$store.state.user = res;
      this.$store.state.user.accountBalance = res.accountBalance;
    });
  },
  methods: {
    go_1() {
      this.$router.push("/my_msg");
    },
    go_2() {
      this.$router.push("/wallet");
    },
    go_3() {
      this.$router.push("/wodedingdan4");
    },
    go_9() {
      this.$router.push("/wodechonzhidingdan");
    },
    go_4() {
      this.$router.push("/kefuzhongxin");
    },
    go_5() {
      this.$router.push("/shezhi");
    },
    go_8() {
      this.$router.push("/userdata");
    },
    go_10(){
      this.$router.push("/usercoupon")
    }
  },
  components: {},
};
</script>

<style scoped lang="less">
.personal_ {
  position: fixed;
  z-index: 8888;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #fff;
  width: 5rem;
  .p_top {
    display: flex;
    align-items: center;
    height: 2.66rem;
    color: #fff;
    background-color: #43a7ff;
    img {
      margin: 0 0.28rem 0 0.24rem;
      width: 1.28rem;
      height: 1.28rem;
    }
    p {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 0.3rem;
      span:last-of-type {
        margin-top: 0.1rem;
        font-size: 0.2rem;
      }
    }
    & > span {
      margin-right: 0.3rem;
      font-size: 0.5rem;
    }
  }
  .p_list {
    padding-top: 0.52rem;
    background-color: #fff;
    li {
      display: flex;
      align-items: center;
      height: 1rem;
      img:nth-of-type(1) {
        margin: 0 0.36rem 0 0.24rem;
        width: 0.44rem;
        height: 0.38rem;
      }
      img:nth-of-type(2) {
        margin: 0 0.42rem 0 0.24rem;
        width: 0.38rem;
        height: 0.45em;
      }
      img:nth-of-type(3) {
        margin: 0 0.37rem 0 0.24rem;
        width: 0.43rem;
        height: 0.43rem;
      }
      img:nth-of-type(4) {
        margin: 0 0.38rem 0 0.24rem;
        width: 0.42rem;
        height: 0.42rem;
      }
      img:nth-of-type(5) {
        margin: 0 0.37rem 0 0.24rem;
        width: 0.43rem;
        height: 0.43rem;
      }
      img:nth-of-type(6) {
        margin: 0 0.37rem 0 0.24rem;
        width: 0.43rem;
        height: 0.43rem;
      }
      span {
        flex: 1;
      }
    }
  }
}
</style>
